<template>
  <!-- 结算中心 -->
  <div class="settlement">
    <topbar/>
    <div class="settlement_logo_box">
      <div class="settlement_logo_mid">
        <div class="settlement_logo">
          <router-link to="/">
            <img src="@/assets/images/logo/xiaobaishop_0.png">
          </router-link>
        </div>
        <div class="settlement_logo_next">
          <div class="settlement_logo_next_box">
            <el-steps :active="0" finish-status="success" align-center>
              <el-step title="拍下商品"></el-step>
              <el-step title="付款"></el-step>
              <el-step title="确认收货"></el-step>
              <el-step title="评价"></el-step>
            </el-steps>
          </div>
        </div>
      </div>
    </div>
    <div class="settlement_mid">
      <div class="settlement_address">
        <div class="settlement_address_title">选择收货地址 <span>使用新的地址</span><span @click="address_manager">管理收货地址</span></div>
        <div class="settlement_address_box">
          <div
            :class="[address_index==index ? 'settlement_address_box_item_hover settlement_address_box_item' : 'settlement_address_box_item']"
            v-for="(item,index) in address" @click="address_change(index)">
            <div class="settlement_address_box_item_title">{{ item.pro_cities }}-{{ item.name }}</div>
            <div class="settlement_address_box_item_content">
              <p>
                {{ item.address }}-{{ item.number }}
              </p>
            </div>
            <div class="settlement_address_box_item_content_btn">
              <span @click="edit_address(item.address_id)">编辑</span>
              <span @click="del_address(item.address_id)">删除</span>
            </div>
          </div>
        </div>
      </div>
      <div class="settlement_address_title">确认下单信息</div>
      <div class="settlement_box">
        <div class="settlement_box_item" v-for="(item,index) in order" :key="index">
          <div class="settlement_box_item_img">
            <img :src="item.commodity_img"/>
          </div>
          <div class="settlement_box_item_img_text">
            <div class="settlement_box_item_img_text_title">
              <router-link :to="{path:'items',query:{id:item.commodity_id}}">
                {{ item.commodity_title }}
              </router-link>
            </div>
            <div class="settlement_box_item_img_text_box">
              <div class="settlement_box_item_box">
                <span>{{ item.commodity_type }}</span>
                <span>{{ item.commodity_deliver }}</span>
              </div>
              <div class="settlement_box_item_box">
                <span v-for="(conf,index) in item.commodity_configure" :key="index">{{
                    conf.name + ':' + conf.value
                  }}</span>
              </div>
              <div class="settlement_box_item_box">
                <span>{{ item.commodity_price }}</span>
              </div>
              <div class="settlement_box_item_box">
                <el-input-number @change="input_number" size="mini" label="数量" v-model="item.commodity_count" :min="1"
                                 :max="10"></el-input-number>
              </div>
              <div class="settlement_box_item_box">
                <span class="settlement_box_item_box_del">删除</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="settlement_box_pay">
        <div class="settlement_box_pay_price">
          <div class="settlement_box_pay_box">
            <span>结算数量:</span>
            <span>{{ order_count }}</span>
          </div>
          <div class="settlement_box_pay_box">
            <span>结算总价:</span>
            <span><i>￥</i>{{ order_price }}</span>
          </div>
        </div>
        <div class="settlement_box_pay_price settlement_pay_btn">
          <div class="settlement_box_pay_box settlement_addr">
            <span>已选收货地址:</span>
            <span>{{
                address[address_index].address + '-' + address[address_index].name + '-' + address[address_index].number
              }}</span>
          </div>
          <div class="settlement_box_pay_btn">
            立即付款
          </div>
        </div>
      </div>
    </div>
    <Bottom/>

    <div class="settlement_alert_back" v-if="is_show_back">
      <div class="settlement_alert_back_box">
        <img src="@/assets/images/other/close.png" class="settlement_close" @click="close_back"/>
        <div class="settlement_alert_back_box_title">管理我的收货地址</div>
        <div class="settlement_alert_back_box_items">
          <div class="settlement_alert_back_box_items_box">
            <div class="settlement_alert_back_box_item" v-for="data in 10">
              <div class="settlement_alert_back_box_item_box">
                <span>马中华</span>
                <span>19999999999</span>
              </div>
              <div class="settlement_alert_back_box_item_box">
                <span>甘肃省兰州市七里河区龚家湾兰州工业学院</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import topbar from "@/components/topbar.vue";
import Bottom from "@/components/bottom.vue";

export default {
  name: "settlement",
  data() {
    return {
      address: [
        {
          address_id: 1,
          name: "小白",
          address: "甘肃省兰州市七里河区龚家湾街道兰州工业学院",
          pro_cities: "甘肃兰州",
          number: 19999999999
        }, {
          address_id: 1,
          name: "小白",
          address: "甘肃省兰州市七里河区龚家湾街道兰州工业学院",
          pro_cities: "甘肃兰州",
          number: 19999999999
        }, {
          address_id: 1,
          name: "小白",
          address: "甘肃省兰州市七里河区龚家湾街道兰州工业学院",
          pro_cities: "甘肃兰州",
          number: 19999999999
        }, {
          address_id: 1,
          name: "小白",
          address: "甘肃省兰州市七里河区龚家湾街道兰州工业学院",
          pro_cities: "甘肃兰州",
          number: 19999999999
        },
      ],
      order_price: 0,
      order_count: 0,
      order: [
        {
          commodity_img: 'https://s.mazhonghua.cn/getImage/R7grkbNptdI4T9QpkUXF?imgSize=1',
          commodity_title: '巴黎欧兰雅男士火山岩洗面奶',
          commodity_count: 1,
          commodity_price: "8559.00",
          commodity_id: 1,
          shop_id: 10,
          commodity_type: '预售',
          commodity_deliver: '付款7天内发货',
          commodity_configure: [
            {
              name: '机身颜色',
              value: '苹果13ProMax远峰蓝【6.7英寸】[咨询有惊喜]'
            }, {
              name: '套餐类型',
              value: '套餐一 存储容量：512GB'
            }, {
              name: '版本类型',
              value: '中国大陆'
            },
          ]
        },
      ],
      shop_count: 0,
      address_index: 0,
      is_show_back: false,
    }
  },
  components: {
    topbar,
    Bottom
  },
  created() {
    this.init_all_price()
    console.log(JSON.stringify(this.order))
  },
  methods: {
    address_manager(){
      this.is_show_back = true
    },
    close_back(){
      this.is_show_back = false
    },
    init_all_price() {
      var data = this.order
      var price = 0
      var count = 0
      for (var a = 0; a < data.length; a++) {
        price += Number(data[a].commodity_price * data[a].commodity_count)
        count += data[a].commodity_count
      }
      this.order_price = price
      this.order_count = count
    },
    del_address(address_id) {

    },
    edit_address(address_id) {

    },
    input_number(currentValue, oldValue) {
      console.log(currentValue, oldValue)
      this.init_all_price()
    },
    address_change(index) {
      this.address_index = index
    }
  }
}
</script>

<style scoped>
.settlement_alert_back_box_items_box {
  width: 100%;
  height: calc(100% - 50px);
  overflow: auto;
}

.settlement_close:hover {
  transform: rotate(180deg);
}

.settlement_close {
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition-duration: 0.3s;
  position: absolute;
  z-index: 5;
  top: 4px;
  right: 4px;
}

.settlement_alert_back_box_item_box span {
  color: #442f1a;
  margin-right: 5px;
  line-height: 20px;
  font-size: 14px;
}

.settlement_alert_back_box_item_box {
  width: calc(100% - 20px);
  height: 20px;
  margin: 0px auto;
}


.settlement_alert_back_box_item {
  width: 100%;
  height: 45px;
  padding-top: 10px;
  background-color: #E4E7ED;
  border-radius: 3px;
  margin-top: 10px;

}

.settlement_alert_back_box_items {
  width: calc(100% - 20px);
  height: 100%;
  margin: 0px auto;
}

.settlement_alert_back_box_title {
  width: 600px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #442f1a;
  text-indent: 10px;
  border-bottom: 1px solid #958a7e;
  margin: 0px auto;

}

.settlement_alert_back_box {
  width: 600px;
  height: 400px;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  background-color: #ffffff;
  border-radius: 5px;
}

.settlement_alert_back {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.settlement_box_pay_btn:hover {
  background-color: #ff6600;
}

.settlement_box_pay_btn {
  width: 150px;
  height: 40px;
  transition-duration: 0.3s;
  background-color: #ff4400;
  border-radius: 5px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
}

.settlement_pay_btn {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.settlement_addr span {
  color: #442f1a !important;
  font-size: 14px !important;
  font-weight: unset !important;
}

.settlement_box_pay_box span:last-child i {
  font-size: 14px;
  font-style: unset;
}

.settlement_box_pay_box span:last-child {
  font-size: 26px;
  color: #ff4400;
  font-weight: bold;
}

.settlement_box_pay_box {
  width: auto;
  height: 40px;
  margin-top: 10px;
  line-height: 40px;
  font-size: 14px;
  margin-right: 20px;
}

.settlement_box_item_box_del:hover {
  text-decoration: underline;
}

.settlement_box_item_box_del {
  color: #442f1a;
  cursor: pointer;
}

.settlement_box_pay_price {
  width: calc(100% - 40px);
  margin: 0 auto;
  height: 50px;
  display: flex;
  flex-wrap: nowrap;
}

.settlement_box_pay {
  width: 100%;
  border-radius: 5px;
  height: 100px;
  background-color: #FFFFFF;
  margin-top: 10px;
}

.settlement_box_item_box span {
  width: 100%;
  height: auto;
  max-height: 40px;
  line-height: 20px;
  font-size: 12px;
  display: block;

}

.settlement_box_item_box {
  width: auto;
  max-width: 500px;
  height: 100%;
}

.settlement_box_item_img_text_box {
  width: calc(100% - 20px);
  height: calc(100% - 45px);
  margin-left: 10px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;

}

.settlement_box_item_img_text_title a:hover {
  text-decoration: underline;
}

.settlement_box_item_img_text_title a {
  color: #442f1a;
  transition-duration: 0.3s;
}

.settlement_box_item_img_text_title {
  width: calc(100% - 20px);
  margin: 10px 10px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  border-bottom: 1px solid #E4E7ED;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.settlement_box_item_img_text {
  width: calc(100% - 155px);
  height: calc(100% - 5px);
  margin: 5px 0px;
}

.settlement_box_item_img img {
  width: 140px;
  height: 140px;
  margin: 5px 5px;
}

.settlement_box_item_img {
  width: 150px;
  height: 150px;
}

.settlement_box_item_title {
  width: calc(100% - 40px);
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #442f1a;
  margin: 0 auto;
}

.settlement_box_item {
  width: 100%;
  height: 150px;
  margin-top: 10px;
  background-color: #ffffff;
  border-radius: 5px;
  display: flex;
  flex-wrap: nowrap;
}

.settlement_box {
  width: 100%;
  height: auto;
  margin-top: 10px;
  border-radius: 5px;
}

.settlement_address_box_item_content_btn span:hover {
  color: #442f1a;
}

.settlement_address_box_item_content_btn span {
  color: #958a7e;
  font-size: 10px;
  margin: 0px 5px 0px 5px;
  line-height: 19px;
  cursor: pointer;
  transition-duration: 0.3s;
}

.settlement_address_box_item_content_btn {
  width: 100%;
  height: 19px;
}

.settlement_address_box_item_content p {
  font-size: 12px;
  line-height: 18px;
  color: #442f1a;
  padding: 3px 10px 0px 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.settlement_address_box_item_content {
  width: 100%;
  height: 61px;
}

.settlement_address_box_item_title {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  font-weight: bold;
  color: #000;
  text-indent: 10px;
  font-family: "新宋体", serif;
  border-bottom: 1px solid #958a7e;
}

.settlement_address_box_item:hover {
  background-color: #f5f5f5;
  border: 2px solid #442f1a;
}

.settlement_address_box_item_hover {
  background-color: #f5f5f5 !important;
  border: 2px solid #442f1a !important;
}

.settlement_address_box_item {
  width: 200px;
  height: 110px;
  border: 2px solid #E4E7ED;
  transition-duration: 0.3s;
  margin: 8px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.settlement_address_box {
  width: 100%;
  margin-top: 10px;
  height: 130px;
  overflow: auto;
  background-color: #ffffff;
  border-radius: 5px;
  display: flex;
}

.settlement_address_title span {
  margin-left: 10px;
  color: #958a7e;
  font-size: 12px;
  cursor: pointer;
  display: inline-table;
  text-indent: 0px;
  padding: 0px 10px 0px 10px;
  width: auto;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  border: 1px solid #958a7e;
}

.settlement_address_title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #FFFFFF;
  border-radius: 5px;
  text-indent: 20px;
  font-size: 14px;
  margin-top: 10px;
}

.settlement_address {
  width: 100%;
  height: auto;
  margin-top: 10px;
}

.settlement_mid {
  width: 1200px;
  height: auto;
  margin: 0 auto;
}

.settlement_logo_next_box {
  width: 600px;
  height: auto;
  float: right;
  position: relative;
  top: 20px;
  left: 20px;
}

.settlement_logo_next {
  width: calc(100% - 200px);
  height: 100%;
}

.settlement_logo img {
  width: 104px;
  height: 64px;
  position: relative;
  top: 18px;
  left: 30px;
}

.settlement_logo {
  width: 200px;
  height: 100px;
}

.settlement_logo_mid {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
}

.settlement_logo_box {
  width: 100%;
  height: 100px;
  background-color: #FFFFFF;
}

.settlement {
  width: 100%;
  height: auto;
  background-color: #E4E7ED;
}
</style>
